<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件对象</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        #box1 {
            width: 300px;
            height: 300px;
            border: 10px greenyellow solid;
        }

        .box1 {
            background-color: red;
        }
    </style>
    <script>
        /* 
            事件（event）

                事件对象
                    事件对象是由浏览器在浏览器在事件触发时所创建的对象，
                    这个对象封装了事件相关的各种信息。
                    通过事件对象，可以获取到事件的详细信息。比如：鼠标的移动，键盘的按键....

                    浏览器在创建事件对象后，会将事件对象做为响应函数的参数传递，所以，我们可以在影响函数中定义一个形参来接收事件对象。


        */
        document.addEventListener("DOMContentLoaded", function () {
            const box1 = document.getElementById("box1")
            box1.addEventListener("mousemove", function (event) {
                box1.classList.add("box1")
                console.log(event)
                console.log(event.clientX,event.clientY)
                box1.textContent=event.clientX+","+event.clientY
            })

        })
    </script>
</head>

<body>
    <div id="box1">

    </div>
</body>

</html>